<template>
  <div>
    <div class="symbol-selector">
      <div
          v-for="symbol in relationalOperatorSymbolsWithSelection"
          :key="symbol.id"
          :class="['symbol-item w-30 text-center cursor-pointer m-4 p-4', { 'symbol-item-active': symbol.isSelected }]"
          @click="selectRelationalOperatorSymbols(symbol)"
      >
        {{ symbol.label }}
      </div>
    </div>
    <div class="selected-symbol">
      <span v-for="item in selectedRelationalOperatorSymbols">{{ item.label }},</span>
    </div>
    <!--  <el-select>-->
    <!--    <el-option v-for="(item, index) in relationalOperatorSymbols" :label='item.description' :value='item.value'>{{ item.label }}</el-option>-->
    <!--  </el-select>-->
  </div>
</template>

<script>
import { relational_operator, symbols } from '../symbols'

export default {
  name: 'index',
  data() {
    return {
      relationalOperatorSymbolsWithSelection: relational_operator.map(symbol => ({
        ...symbol,
        isSelected: false
      })),
      // 被选中的数学符号
      selectedRelationalOperatorSymbols: [],
    }
  },
  methods: {
    selectRelationalOperatorSymbols(symbol) {
      const index = this.selectedRelationalOperatorSymbols.findIndex((item, index) => item.value === symbol.value)
      if (index !== -1) {
        this.selectedRelationalOperatorSymbols.splice(index, 1) // 从数组中删除符号
      } else {
        this.selectedRelationalOperatorSymbols.push(symbol) // 将符号添加到数组中
      }
      this.relationalOperatorSymbolsWithSelection.forEach(item => {
        if (item.value === symbol.value) {
          // 切换 isSelected 属性的值
          item.isSelected = !item.isSelected
        }
        // else {
        //   item.isSelected = false; // 将其他符号的 isSelected 属性设置为 false
        // }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.symbol-selector {
  width: 100px;
  height: 300px;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: start;
  overflow-y: auto;
  -ms-overflow-y: auto ;
}

.symbol-item {
  border: 1px solid #ccc;
  border-radius: 4px;
  &-active {
    background-color: #fcbd01;
  }
}

.selected-symbol {
  display: inline-block;
  cursor: pointer;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 500px;
  height: 40px;
}
</style>
